//out:../css/
.main {
    width: 100%;

    .banner {
        position: relative;
        width: 100%;
        height: 600px;
        background: url(../assets/uploads/online-banner-bg1.webp);

        img {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 1200px;
            height: 362px;
            vertical-align: middle;

        }
    }

    .onlineclass {
        margin-top: 150px;
        width: 1200px;

        .classlist {
            display: flex;
            justify-content: space-between;
            width: 1200px;
            height: 281px;

            .itemclass {
                width: 282px;
                height: 281px;
                // background: peru;
                border-radius: 20px;
                background: linear-gradient(147.89deg, #F7FCFF 0%, #FFFFFF 53.09%, #F7FCFF 100%);
                // border: 1px solid #FFFFFF;
                box-shadow: 0px 11px 25px #9C9FA5, 0px 45px 45px #9C9FA5;

                a {

                    img {
                        width: 282px;
                        height: 158px;
                        border-radius: 18px 18px 0px 0px;
                        background: rgba(255, 255, 255, 1);
                    }

                    h4 {
                        margin-top: 20px;
                        margin-bottom: 10px;
                        margin-left: 20px;
                        font-size: 24px;
                        font-weight: 400;
                        letter-spacing: 0px;
                        line-height: 28.13px;
                        color: rgba(51, 51, 51, 1);
                    }

                    p {
                        width: 242px;
                        height: 44px;
                        margin-left: 20px;
                        white-space: wrap;
                        /* 保证文本不换行 */
                        overflow: hidden;
                        /* 隐藏超出容器的内容 */
                        text-overflow: ellipsis;
                        /* 使用省略号表示被截断的文本 */
                        font-size: 16px;
                        font-weight: 400;
                        letter-spacing: 0px;
                        line-height: 22px;
                        color: rgba(51, 51, 51, 1);
                    }
                }

                &:hover {
                    background: rgba(24, 66, 182, 1);
                }

                &:hover h4,
                &:hover p {
                    color: rgba(255, 255, 255, 1);
                }
            }
        }
    }

    .skillup {
        width: 1200px;
        margin-top: 70px;

        .skill-list {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 1200px;
            height: 586px;

            .itemskill {
                width: 282px;
                height: 281px;
                margin-bottom: 24px;
                border-radius: 20px;
                background: linear-gradient(147.89deg, #F7FCFF 0%, #FFFFFF 53.09%, #F7FCFF 100%);
                // border: 1px solid #FFFFFF;
                box-shadow: 0px 11px 25px #9C9FA5, 0px 45px 45px #9C9FA5;

                a {

                    img {
                        width: 282px;
                        height: 158px;
                        border-radius: 18px 18px 0px 0px;
                        background: rgba(255, 255, 255, 1);
                    }

                    h4 {
                        margin-top: 20px;
                        margin-bottom: 10px;
                        margin-left: 20px;
                        font-size: 24px;
                        font-weight: 400;
                        letter-spacing: 0px;
                        line-height: 28.13px;
                        color: rgba(51, 51, 51, 1);
                    }

                    p {
                        width: 242px;
                        height: 44px;
                        margin-left: 20px;
                        white-space: wrap;
                        /* 保证文本不换行 */
                        overflow: hidden;
                        /* 隐藏超出容器的内容 */
                        text-overflow: ellipsis;
                        /* 使用省略号表示被截断的文本 */
                        font-size: 16px;
                        font-weight: 400;
                        letter-spacing: 0px;
                        line-height: 22px;
                        color: rgba(51, 51, 51, 1);
                    }
                }
                &:hover {
                    background: rgba(24, 66, 182, 1);
                }

                &:hover h4,
                &:hover p {
                    color: rgba(255, 255, 255, 1);
                }
            }
        }
    }
}